<script lang="ts" setup>
import { getCurrentInstance, ref, inject } from 'vue'
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { privacyPopup } from '@/components/privacyPopup'
import { useUserStore } from '@/stores'
import { getGradesApi } from '@/services/api'
import boolean from '@tuniao/tnui-vue3-uniapp/libs/async-validator/validator/boolean'

const {
  navBarInfo,
  userInfo,
  loginHandle,
  navUserInfoPage,
  navCommonProblemPage,
  navMemberRightsPage,
  navOrderListPage,
  navbarInitFinishHandle,
} = useSubPage()
const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
  useScrollUpdownBottomContent('up', 80)
let gradeList = []
onReady(() => {})
onPageScroll((e) => {})
const show = ref<boolean>(false)
const snDetail = ref({})
const ifBindSn = ref()
const userStore = useUserStore()
const selectGrade = ref({})
const handleShow = () => {
  show.value = true
}
const handleSelectGrade = (item: any) => {
  uni.setStorageSync('gradeData', item) //将名字存入缓存
  selectGrade.value = item
  show.value = false
}
const getGradesList = async () => {
  const res = await getGradesApi()
  if (res.code === 0) {
    gradeList = res.data
  }
}
onLoad(async () => {
  await getGradesList()
  selectGrade.value = uni.getStorageSync('gradeData') || gradeList[0]
  if (!uni.getStorageSync('gradeData')) {
    uni.setStorageSync('gradeData', gradeList[0])
  }
})
//调起微信小程序扫码
const toScanMate = () => {
  uni.scanCode({
    onlyFromCamera: true, // 默认false，true为只允许从相机扫码
    success: async (res) => {
      console.info(res) //打印出来，查看自己想要的返回结果数据
      // 拿SN码去绑定设备
      await userStore.toBindUserSn(res.result)
      ifBindSn.value = userStore.getIfBindSn
      snDetail.value = userStore.getSnDetail
    },
  })
}
onShow(() => {
  setTimeout(() => {
    userStore.checkUserSn().then(() => {
      ifBindSn.value = userStore.getIfBindSn
      snDetail.value = userStore.getSnDetail
    })
  }, 1000)
})
</script>

<template>
  <TnNavbar
    fixed
    bg-color="transparent"
    :bottom-shadow="false"
    :placeholder="false"
    title="续费"
    @init-finish="navbarInitFinishHandle"
    style="display: flex; align-items: center"
  >
    <template #back>
      <view
        class="logo-pic tn-shadow-blur tn-flex tn-flex-center"
        @click="handleShow"
      >
        <view class="logo-image tn-flex">
          <view>{{ selectGrade.name }}</view>
          <TnIcon name="right" />
        </view>
      </view>
    </template>
    <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
      <view class="tn-flex tn-flex-col-center title_box">
        <text class="tn-text-xl tn-color-black">语境佳</text>
        <text
          class="tn-icon-down-triangle tn-color-white tn-padding-left-xs"
          style="opacity: 0.3"
        ></text>
      </view>
    </view>
  </TnNavbar>
  <!-- 作者信息弹框 -->
  <TnPopup
    v-model="show"
    radius="30"
    open-direction="top"
    :top="navBarInfo.height + 12"
  >
    <!-- :style="{ paddingTop: `${navBarInfo.height + 12}px` }" -->
    <view class="">
      <scroll-view
        scroll-y="true"
        style="max-height: 45vh; max-width: 640px; margin: 0 auto"
      >
        <view>
          <view
            class="tn-flex tn-flex-col-center"
            style="margin: 20rpx 20rpx"
            v-for="(item, index) in gradeList"
            :key="index"
          >
            <view class="tn-padding-left-sm" style="width: 100%">
              <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                <view
                  class="justify-content-item"
                  @click="handleSelectGrade(item)"
                >
                  <text class="oa-black tn-text-lg">{{ item.name }}</text>
                </view>
              </view>
              <view class="tn-padding-top-xs tn-text-ellipsis">
                <text
                  class="tn-color-gray tn-text-sm tn-icon-trusty-fill"
                ></text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </TnPopup>
  <!-- 顶部背景 -->
  <view class="top-bg" />
  <!-- 页面内容 -->
  <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
    <view class="top_scanBox" v-if="ifBindSn == false">
      <view class="left_box">
        <TnIcon name="tip" size="40rpx" color="#fff" />
        <view class="text">设备未激活</view>
      </view>
      <button @tap="toScanMate" class="scanBtn" size="mini">激活</button>
    </view>
    <!-- 展示 -->
    <view class="icon-tips flex flex-ai-center">
      <view class="plr-8 pt-8 text font-size-12 font-color-c070044"
        >hello，下午好语景通练英语,场景对话真轻松.达人指导助提升，英语交流我最通!</view
      >
      <image
        class="image"
        src="../../static/imgs/index/robot.png"
        mode=""
      ></image>
    </view>
    <view class="about bg-color-white mlr-16 plr-16 ptb-16">
      <view class="about-before flex flex-ai-center">
        <image
          class="image-icon ml-8"
          src="../../static/imgs/index/robot-icon.png"
          mode=""
        ></image>
        <view
          class="text-icon ml-12 flex flex-ai-center flex-js-sb ptb-4 pl-16 pr-12"
        >
          <text class="font-size-12 font-color-c372850"
            >上次练习了“见面问候"</text
          >
          <view class="continue-btn flex flex-ai-center flex-js-center">
            <text class="font-size-10 font-color-white">继续练习</text>
          </view>
        </view>
      </view>
      <view class="content-wrapper">
        <view
          class="content-item"
          @tap.stop="tnNavPage('/home-page/typeStudy/dialogue/index')"
        >
          <view class="image-icon">
            <image src="../../static/imgs/index/left-icon.png" mode=""></image>
          </view>
          <view class="left">
            <view class="title font-size-19 font-color-white font-w-600"
              >场景练习</view
            >
            <view class="show-more mt-4">
              <text class="font-size-14 font-color-white">现在就来练习吧~</text>
            </view>
            <view
              class="font-size-11 mt-10 font-color-c7545DE flex flex-ai-center flex-js-center start-icon"
              >开始练习</view
            >
          </view>
        </view>
        <view
          class="content-item"
          @tap.stop="tnNavPage('/home-page/sceneTeaching/dialogue/index')"
        >
          <view class="image-icon">
            <image src="../../static/imgs/index/right-icon.png" mode=""></image>
          </view>
          <view class="left">
            <view class="title font-size-19 font-color-white font-w-600"
              >达人对话</view
            >
            <view class="show-more mt-4">
              <text class="font-size-14 font-color-white">现在就来聊聊吧~</text>
            </view>
            <view
              class="font-size-11 mt-10 font-color-c7545DE flex flex-ai-center flex-js-center start-icon"
              >开始对话</view
            >
          </view>
        </view>
        <view
          class="content-item bottom-item"
          @tap.stop="tnNavPage('/home-page/agent/list')"
          style="width: 100%"
        >
          <view class="image-icon">
            <image
              src="../../static/imgs/index/bottom-icon.png"
              mode=""
            ></image>
          </view>
          <view class="bottom-left">
            <view class="font-size-14 font-color-white mt-4">话题演讲</view>
            <view class="show-more">
              <text class="font-size-10 font-color-white mt-2"
                >自定义对话身份及场景</text
              >
            </view>
            <view
              class="font-size-11 mt-8 font-color-cDB6525 flex flex-ai-center flex-js-center start-icon"
              >开始对话</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 隐私授权框 -->
  <privacyPopup></privacyPopup>
</template>

<style lang="scss" scoped>
@import './styles/index.scss';
.top_scanBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #4f4f4f;
  height: 60rpx;
  .left_box {
    display: flex;
    padding-left: 30rpx;
    .text {
      margin-left: 20rpx;
      color: #fff;
    }
  }
  .scanBtn {
    // width: 100rpx;
    // height: 100rpx;
    margin: 0 10rpx;
    width: 100rpx;
    height: 40rpx;
    font-size: 20rpx;
    background: blue;
    color: #fff;
    line-height: 40rpx;
    padding: 0;
    margin-right: 40rpx;
  }
}
</style>
